<template>
  <view class="app-settings-page">
    <view class="settings-title">{{ $t('index.settings.language') }}</view>
    <je-radio-group
      :value="globalStore.locale"
      mode="list"
      :options="locales"
      @change="onLocaleChange"
    />

    <view class="settings-title">{{ $t('index.settings.theme') }}</view>
    <view class="settings-content settings-content-theme">
      <je-icon
        v-for="color in globalStore.theme.colors"
        :key="color"
        :color="color"
        :icon="
          globalStore.theme.basePrimaryColor === color ? 'fas fa-check-square' : 'fas fa-square'
        "
        @click="onThemeClick(color)"
      />
    </view>

    <view class="settings-title">{{ $t('index.settings.dark') }}</view>
    <view class="settings-content">
      <switch :checked="globalStore.theme.dark" @change="onDarkChange" />
    </view>
    <view class="settings-title">{{ $t('index.settings.gray') }}</view>
    <view class="settings-content">
      <switch :checked="globalStore.theme.mode" @change="onModeChange" />
    </view>
  </view>
</template>
<script>
  import { useGlobalStore } from '@/service/store/global-store';
  import { locales } from '@/locale';
  import { changeI18n, getNavigationBarColor } from '@/service/helper';
  export default {
    options: { styleIsolation: 'shared' },
    setup() {
      const globalStore = useGlobalStore();
      // 系统语言
      const onLocaleChange = ({ value }) => {
        changeI18n(value);
      };
      // 主题
      const onThemeClick = (color) => {
        globalStore.setTheme({ primaryColor: color });
      };
      // 暗黑主题
      const onDarkChange = ({ detail }) => {
        const { value } = detail;
        globalStore.setTheme({ dark: value });
        uni.setNavigationBarColor(getNavigationBarColor());
      };
      // 灰色主题
      const onModeChange = ({ detail }) => {
        const { value } = detail;
        globalStore.setTheme({ mode: value });
      };

      return {
        globalStore,
        locales,
        onThemeClick,
        onLocaleChange,
        onDarkChange,
        onModeChange,
      };
    },
  };
</script>
<style lang="scss">
  .app-settings-page {
    padding: 20px;
    .settings-title {
      padding: 20px 0;
      font-size: 18px;
      font-weight: bold;
      line-height: 20px;
      color: $je-text-color;
    }
    .settings-content {
      padding: 20px 10px;
    }
    .settings-content-theme {
      .je-icon {
        font-size: 30px;
        margin-right: 20px;
      }
    }
  }
</style>
